<template>
  <div class="coscoltable">
    <ag-grid-vue
      class="ag-theme-alpine"
      :rowData="props.rowdata"
      :columnDefs="props.col"
      :enableRangeSelection="true"
      :defaultColDef="defaultColDef"
      :style="{ width, height }"
      @grid-ready="onGridReady"
    ></ag-grid-vue>
  </div>
</template>

<script setup>
import { AgGridVue } from "ag-grid-vue3";
import { ref } from "vue";
const props = defineProps({
  rowdata: ref(),
  col: ref(),
  width: ref(),
  height: ref(),
});
var gridApi = ref();
const onGridReady = (params) => {
  gridApi.value = params.api;
};
function getGridData() {
  const rowData = [];
  gridApi.value.forEachNode(function (node) {
    rowData.push(node.data);
  });
  return rowData;
}
var defaultColDef = {
  resizable: true,
  editable: true,
  autoHeight: true,
  width: 80,
};
</script>

<style scope></style>
